<template>
  <div id='eventManDetail' v-loading.body='loading' element-loading-text="拼命加载中">
    <div class="title">
      <div class="text">
          {{eventDetail.summary.event_name}}详情
      </div>
      <div class="download" v-show='download'>
        <at-button  type='primary' @click='jumplog'><i class="saas-icon-note" style="font-size:20px;vertical-align: middle;"></i>查看日志</at-button>
        <at-button v-show='analysis' type="primary" @click='exportPdf'><i class="saas-icon-res-down" style="font-size:20px;vertical-align: middle;"></i>PDF下载</at-button>
      </div>
    </div>
    <div class="eventD" id='pdfDom'>
      <div class="publicStyle" v-show="$route.query.type=='autoAnalysis'">
        <div class="title">
          规则匹配
        </div>
        <div class="summary">
          <div>
            <div style="padding: 0 20px 20px 20px;" v-for='(item,key) in eventDetail.ruleinfo' :key="key">
              <table border="0" style="width:100%;border-color:#eeeeee;background-color:#f8f9fa;border:none;margin-top: 20px;table-layout: fixed;" >
                <tr>
                  <td height="40px" width="15%" style="padding-right: 20px;">规则名称</td>
                  <td height="40px" width="85%" style="padding-left: 20px;text-align: left;">{{item.auto_analysis_result}}
                  </td>
                </tr>
                <tr>
                  <td height="40px" width="15%" style="padding-right: 20px;">规则描述</td>
                  <td height="40px" width="85%" style="padding-left: 20px;text-align: left;">{{item.ruleinfo}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="publicStyle">
        <div class="title">
          攻击事件基本信息
        </div>
        <div class="summary">
          <table class="natable"  width='100%'>
            <tr>
              <td :class='$route.query.type?tdtype:td' >攻击次数</td>
              <td width='400px' >{{eventDetail.summary.attack_num}}</td>
              <td :class='$route.query.type?tdtype:td'>威胁级别 </td>
              <td width='400px'>
                <span :class="['risklevel',eventDetail.summary.threaten_level == '低 危' ? 'LowRisk' : eventDetail.summary.threaten_level == '中 危' ? 'MiddleRisk' : eventDetail.summary.threaten_level == '高 危' ? 'HighRisk' : 'SeriousRisk']">
                  {{eventDetail.summary.threaten_level}}
                </span>
              </td>
            </tr>
            <tr>
              <td :class='$route.query.type?tdtype:td' >首次攻击时间</td>
              <td width='400px' >{{eventDetail.summary.start_time}}</td>
              <td :class='$route.query.type?tdtype:td'>最近攻击时间</td>
              <td width='400px'>{{eventDetail.summary.new_time}}</td>
            </tr>
            <tr>
              <td :class='$route.query.type?tdtype:td' >发布时间</td>
              <td width='400px' >{{eventDetail.summary.ts_time}}</td>
              <td :class='$route.query.type?tdtype:td'>发布机构</td>
              <td width='400px'>{{eventDetail.summary.unit}}</td>
            </tr>
            <tr>
              <td :class='$route.query.type?tdtype:td' >变更版本</td>
              <td width='400px' >{{eventDetail.summary.version}}</td>
              <td :class='$route.query.type?tdtype:td'>处置状态</td>
              <td width='400px'>{{eventDetail.summary.handle_status}}</td>
            </tr>
            <tr valign="text-top">
              <td  :class='$route.query.type?tdtype:td'>事件描述</td>
              <td colspan='3' style="padding-top:10px;padding-bottom:10px" width='400px'>{{eventDetail.summary.event_desc}}</td>
            </tr>
            <tr valign="text-top">
              <td  :class='$route.query.type?tdtype:td'>处置描述</td>
              <td colspan='3' style="padding-top:10px;padding-bottom:10px"  width='400px'>{{eventDetail.summary.handle_desc}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="publicStyle" >
        <div class="title">
          攻击者信息
        </div>
        <div class="summary" style="position:relative">
          <table class="natable"  width='100%'>
            <tr>
              <td :class='$route.query.type?tdtype:td'>攻击组织</td>
              <td width='400px'>{{eventDetail.attackinfo[0].attack_organ}}</td>
            </tr>
            <tr>
              <td :class='$route.query.type?tdtype:td'>攻击者IP组</td>
              <td colspan='3' :style="padding">
                <span v-for = "(item,key) in eventDetail.attackinfo" :key='key' v-show='key<count'>
                  <span style="color:#1f92ef;font-weight:600">{{item.attack_ip}}</span>
                  ({{item.attack_country}}-{{item.attack_area}}-{{item.attack_city}})
                </span>
                <span v-if = '$route.query.type'>
                  <i v-show='eventDetail.attackinfo.length>2' @click="loadMore" :class="[trigger]" style="cursor:pointer;font-size:20px;position: absolute;right: 10px;top:50px;"></i>
                </span>
                <span v-else>
                  <i v-show='eventDetail.attackinfo.length>4' @click="loadMore" :class="[trigger]" style="cursor:pointer;font-size:20px;position: absolute;right: 10px;top:50px;"></i>
                </span>
              </td>      
            </tr>
          </table>
        </div>
      </div>
      <div class="publicStyle">
        <div class="title">
          受害信息
        </div>
        <div class="summary">
          <table class="natable"  width='100%'>
            <tr>
              <td :class='$route.query.type?tdtype:td'>受害系统</td>
              <td width='400px' >{{eventDetail.victim_info.info_sys_name}}</td>
              <td :class='$route.query.type?tdtype:td'>受害资产</td>
              <td width='400px' v-html="subStr(eventDetail.victim_info.sys_node_name)"></td>
            </tr>
            <tr>
              <td :class='$route.query.type?tdtype:td'>单位机构</td>
              <td width='400px'>{{eventDetail.victim_info.victim_unit}}</td>
              <td :class='$route.query.type?tdtype:td'>位置</td>
              <td width='400px'>
                {{eventDetail.victim_info.victim_country}}-{{eventDetail.victim_info.victim_area}}-{{eventDetail.victim_info.victim_city}}
              </td>
            </tr>
            <tr valign="text-top">
              <td :class='$route.query.type?tdtype:td'>受害信息描述</td>
              <td colspan='3' style='padding: 15px 15px 30px 40px;
              text-align: left;' width='400px'>{{eventDetail.victim_info.description}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="publicStyle">
        <div class="title">
          威胁信标
        </div>
        <div class="publicStyle" v-for = "(item,key) in eventDetail.beacon" style="margin:20px">
          <div class="title">
              {{item.threat_type}}
          </div>
          <div class="summary">
            <table class="natable"  width='100%'>
              <tr v-if='item.ip||item.url'>
                <td :class='$route.query.type?tdtype:td' v-if='item.ip'>IP</td>
                <at-tooltip :content="item.ip" placement="top-start" :disabled="item.ip==null?true:item.ip.length<70" >
                  <td width='400px' v-if='item.ip' class="beacon">
                    {{item.ip}}
                  </td>
                </at-tooltip>
                <td :class='$route.query.type?tdtype:td' v-if='item.url'>URL</td>
                <at-tooltip :content="item.url" placement="top-start" :disabled="item.url==null?true:item.url.length<70">
                  <td class="beacon" width='400px' v-if='item.url' >
                      {{item.url}}
                  </td>
                </at-tooltip>
              </tr>
              <tr v-if='item.domain||item.email'>
                <td :class='$route.query.type?tdtype:td' v-if='item.domain'>域名</td>
                <at-tooltip :content="item.domain" placement="top-start" :disabled="item.domain==null?true:item.domain.length<70">
                  <td width='400px' v-if='item.domain' class="beacon" >
                    {{item.domain}}
                  </td>
                </at-tooltip>
                <td :class='$route.query.type?tdtype:td' v-if='item.email'>邮箱</td>
                <at-tooltip :content="item.email" placement="top-start" :disabled="item.email==null?true:item.email.length<70">
                  <td  width='400px' v-if='item.email' class="beacon" >
                    {{item.email}}
                  </td>
                </at-tooltip>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="publicStyle" style="margin-bottom:0">
        <div class="title">
          威胁载荷
        </div>
        <div class="publicStyle" v-for="(item,key) in eventDetail.threatLoad" :key='key' style="margin:20px">
          <div class="summary">
            <table class="natable"  width='100%'>
              <tr>
                <td :class='$route.query.type?tdtype:td'>文件MD5值</td>
                <td width='400px' >{{item.md5}}</td>
                <td :class='$route.query.type?tdtype:td'>文件名称</td>
                <td width='400px'>{{item.fileinfo_name}}</td>
              </tr>
              <tr>
                <td :class='$route.query.type?tdtype:td'> 文件格式</td>
                <td width='400px'>{{item.fileinfo_type}}</td>
                <td :class='$route.query.type?tdtype:td'>恶意代码名称</td>
                <td width='400px'>{{item.malname}}</td>
              </tr>
              <tr>
                <td :class='$route.query.type?tdtype:td'>威胁类型</td>
                <td width='400px'>{{item.maltype}}</td>
                <td :class='$route.query.type?tdtype:td'>威胁等级</td>
                <td width='400px'>{{item.risk}}</td>
              </tr>
              <tr>
                <td :class='$route.query.type?tdtype:td'>利用漏洞</td>
                <td width='400px'>{{item.vector_cve}}</td>
                <td :class='$route.query.type?tdtype:td'>威胁行为</td>
                <td width='400px'>{{item.vector_behavior}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div> 
  </div>
</template>
<script>
  import { downloadpdf } from '../../utils/downloadpdf'
  import { mapState } from 'vuex'
  export default {
    name: 'eventManDetail',
    data () {
      return {
        download: true,
        trigger: 'saas-icon-down',
        td: 'td',
        tdtype: 'tdtype',
        padding: this.$route.query.type ? 'padding-right:300px' : 'padding-right:400px',
        count: this.$route.query.type ? 2 : 4,
        analysis: !this.$route.query.type
      }
    },
    computed: {
      ...mapState({
        loading: state => state.eventManagement.loading
      })
    },
    props: {
      eventDetail: Object
    },
    mounted () {
    },
    methods: {
      // 字符串截取
      subStr (str) {
        if (str.charAt(0) === ',') {
          return str.substring(1)
        }
        return str
      },
      // 下载pdf
      exportPdf () {
        this.$store.commit('/event/changeLoading')
        setTimeout(() => {
          downloadpdf(this, '#eventManDetail', `${this.eventDetail.summary.event_name}详情`)
        }, 200)
      },
      // 攻击ip加载
      loadMore () {
        if (this.$route.query.type) {
          this.count = this.count === 2 ? 999 : 2
        } else {
          this.count = this.count === 4 ? 999 : 4
        }
        this.trigger = this.trigger === 'saas-icon-down' ? 'saas-icon-up' : 'saas-icon-down'
      },
      // 跳转日志
      jumplog () {
        this.$router.push({
          name: '@全部',
          params: { event_id: this.$route.query.row }
        })
      }
    }
  }
</script>
<style lang="less">
  @import './style/eventDetail.less';
</style>
<style scoped>
  @import '../../containers/monitor/eventManagement/style/tag.css';
</style>